/**
 * 托盘图片预览
 */
import { FC, useEffect, useState } from "react";
import { Image } from "antd";
import { ITShelf } from "../../store/interfaces";
import plane50ml from "../../assets/images/50mlplane.png";
import plane15ml from "../../assets/images/15mlplane.png";
import plane5ml from "../../assets/images/5mlplane.png";
import tipLarge from "../../assets/images/tip_large.png";

interface TProp {
  shelfInfo: ITShelf;
}
const PlaneImages: FC<TProp | any> = ({ shelfInfo }: TProp) => {
  const [imgSrc, setImgSrc] = useState<any>(null);
  useEffect(() => {
    let tempSrc = null;
    const { name } = shelfInfo;
    switch (name) {
      case "Plate 6 positions (3x2)":
        tempSrc = plane50ml;
        break;
      case "Plate 12 position (4x3)":
        tempSrc = plane15ml;
        break;
      case "Plate 24 position (6x4)":
        tempSrc = plane5ml;
        break;
      case "tiprack_1000uL":
        tempSrc = tipLarge;
        break;
      case "powder_tips":
        tempSrc = tipLarge;
        break;
      default:
        break;
    }
    setImgSrc(tempSrc);
  }, [shelfInfo]);

  return !!imgSrc ? <Image src={imgSrc} alt="" height={120} /> : null;
};

export default PlaneImages;
